.bttn-material-circle
  {bttnBaseStyle}
  {bttnMdSize}
  overflow hidden
  border-width: 0;
  border-radius 50%
  background cWhite
  box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.18), 0 1px 5px 0 rgba(0, 0, 0, 0.15)
  color cBlue
  transition all 0.25s anim_func
  transform translate3d(0, 0, 0)
  &:hover, &:focus
    box-shadow 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
    transition box-shadow 0.4s ease-out
  &.bttn-xs
    {bttnXsSize}
    width: 28px;
    height: 28px;
    line-height: 24px;
  &.bttn-sm
    {bttnSmSize}
    width: 36px;
    height: 36px;
    line-height: 30px;
  &.bttn-md
    {bttnMdSize}
    width: 44px;
    height: 44px;
    line-height: 38px;
  &.bttn-lg
    {bttnLgSize}
    width: 54px;
    height: 54px;
    line-height: 44px;
  &.bttn-default
    background cWhite
    color cBlue
  &.bttn-primary
    background cBlue
    color cWhite
  &.bttn-warning
    background cYellow
    color cWhite
  &.bttn-danger
    background cRedLight
    color cWhite
  &.bttn-success
    background cGreen
    color cWhite
  &.bttn-royal
    background cPurple
    color cWhite